<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="css/animate.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     	padding-bottom:40px;
     }
   </style>
</head>
<body> 
	 <div class="container" id="app">
	    <h1>Vue2.0 过渡动画效果 配合第三方插件 animate.css</h1>
           {{ message }}
		 <button v-on:click="show = !show">
		    Toggle
		  </button>
		  <transition name="fade"   
		  appear
		  appear-active-class="animated bounce"
		  v-on:before-appear="beforeDefault"
		  v-on:after-appear="afterDefault"
		  enter-active-class="animated  flipInX"   
		   v-on:before-leave="beforeLeave" 
		   v-on:after-leave="afterLeave" 
		   v-on:before-enter="beforeEnter" 
		   v-on:after-enter="afterEnter" 
		   leave-active-class="animated flipOutX"
		    >
		     <p v-if="show"  style="font-size:30px; color:red;" >hello</p>
		  </transition>
		  
		  
		    <transition name="fade2"   enter-active-class="animated  flipInX"     v-on:after-enter="afterEnter2"   >
		     <p v-if="showTwo"  style="font-size:30px; color:red;" >Word</p>
		  </transition>
		  
		   <transition name="fade3"   enter-active-class="animated  flipInX"   >
		     <p v-if="showThree"  style="font-size:30px; color:red;" >MY name is liubf</p>
		  </transition>
	 </div>
	  
	  
	  <div class="container" id="app2">
	      <h1>Vue2.0 动画效果 组件动画(动画效果包含在组件内)</h1>
	    <p>{{ message }}</p>
	    <my-animate></my-animate>
	     <my-animate></my-animate>
	  </div> 
	  
	  	  <div class="container" id="app3">
	      <h1>Vue2.0 动画效果+列队 组件动画 (以动画的效果加载组件，动画效果在组件外)</h1>
	     <p>{{ message }}</p>
	     <button v-on:click='updateData(parentProps)'> 点击试试 </button>
	     	<transition name='myAni2'  enter-active-class='animated  flipInX'   v-on:after-enter="afterEnter" >
	     		  <three-component :props='parentProps'></three-component>
	       </transition>
	       <transition name='myAni2'  enter-active-class='animated  flipInX'>
	     		  <four-component :props2='parentProps2'></four-component>
	       </transition>
	  </div> 
	  
	    <div class="container" id="app4">
	      <h1>Vue2.0 动态组件动画效果 同一个动画动态加载不同的组件</h1>
	       <p>{{ message }}</p>
	       <button v-on:click='updateInfo'>{{ info }}</button>
	       <transition name='myAni2'  enter-active-class='animated  flipInX'>
	       <component v-bind:is="view"></component>
	       </transition>
	    </div>
    
	 
</body>
</html>
<script>

 new Vue({
  el: '#app',
  data : {
	  message : "Vue2.0过渡动画效果的学习(各种钩子函数+列队动画)",
	  show: true,
	  showTwo : null,
	  showThree : null
  },
  methods: {
	     beforeLeave: function (el) {    //隐藏动画开始时执行的回调函数	
		   alert("隐藏动画开始前执行的回调函数 : 动画的文本为—" + $(el).html() );
		  },
	    afterLeave: function (el) {
		   alert("隐藏动画结束后执行的回调函数: 动画的文本为—" + $(el).html()  );
		  },
		 beforeEnter: function (el) {
			  alert("显示动画开始前执行的回调函数: 动画的文本为—" + $(el).html() );
		 },
		 afterEnter: function (el) {
			  alert("显示动画结束后执行的回调函数: 动画的文本为—" + $(el).html() );    
		},
		beforeDefault :function(el){
			alert("默认动画开始前执行的回调函数: 动画的文本为—" + $(el).html() );
		},
		afterDefault :function(el){
			alert("默认动画结束后执行的回调函数: 动画的文本为—" + $(el).html() );
			this.showTwo = true;  //开始列队动画
		},
		afterEnter2: function (el) {
			this.showThree = true;  //开始列队动画
		}
  }
});
   new Vue({
	  el : "#app2",
	  data : {
		  message  : "组件动画的的学习 整个组件是一个动画"
	  },
	  components:{
		  "my-animate" : {
			  template : "<div><button v-on:click='updateConfig(config)'>点击试试</button><p>{{ config }}</p>  <transition name='myAni'  enter-active-class='animated lightSpeedIn'><p style='color:green; font-size:30px;' v-if='config' >Hello Word!</p></transition> </div>",
			  data : function(){
				  return {
					  config : false
				  }
			  },
			  methods:{
				  updateConfig : function(config){
					  if(config == true){
						  this.config = false
					  }else{
						  this.config = true
					  }
				  }
				  
			  }
		  }
	  }
   });
   
   new Vue({
	   el : "#app3",
	   data : {
		   message : "组件动画的的学习 列队动画特效加载组件",
		   parentProps: false,
		   parentProps2 : false
	   },
	   components : {
		   "three-component" : {
			   template : "<div style='font-size:30px; color:blue;' v-if='props'> {{ props }} Vue is so cool!  我是组件一 </div>",
			   props: ['props'],
			   watch : {
				   props : function (newV,oldV){  //组件内部  监听props值的改变 触发事件
					   alert(oldV +  "—" +newV );
				   } 
			   }
              
		   },
		   "four-component" : {
			   template : "<div style='font-size:30px; color:red;' v-if='props2'> {{ props2 }} lbf is so cool! 我是组件二 </div>",
			   props: ['props2'],
			   watch : {
				   props2 : function (newV,oldV){  //组件内部  监听props值的改变 触发事件
					   alert(oldV +  "—" +newV );
				   } 
			   }
		   }
	   },
	   methods:{
		   updateData : function(data){
			 if(data == true){  //关闭动画
			   	  this.parentProps =false;
				  this.parentProps2 = false;
			 }else{                    //开启第一个动画
				 this.parentProps =true;
			 }
		   },
		   afterEnter: function (el) {  //第一个列队动画结束后执行的回调事件
				  this.parentProps2 = true; //开启第二个动画
			}
	   }
   });
   
   new Vue({
	   el : "#app4",
	   data : {
		   message : "动态组件动画特效",
		   info : "使用组件一",
		   view : "home"
	   },
	   components: {
		     'home' : {
		    	 template : "<div style='padding:20px; border:2px solid #d9d9d9; background:orange; '>my name is Home! 我是组件Home</div>"
		     },
		     'goods' : {
		    	 template : "<div style='padding:5px; background:#333; color:#fff; '>my name is goods!</div>"	 
		     }
		},
	   methods : {
		   updateInfo : function(){
			   this.info == "使用组件一" ?   this.info="使用组件二"  :   this.info="使用组件一" ;
			   this.view == "home" ?     this.view = 'goods'  : this.view = "home";
		   }
		   
		   
	   }
   
	   
   });
   

 
</script>
	

